<template>
   
    <div class="">
        <TopView />
    <div class="container">
      <div class="con-right">
        <ul>
          <li class="myindex">我的主页</li>
          <li>我的课程</li>
          <li>我的订单</li>
        </ul>
      </div>
      <div class="main">
        <h2>个人信息</h2>
        <div class="info-item">
          <label>昵称</label>
          <span class="modify">修改</span>
          <p>{{$store.state.userInfo.nickname}}</p>
        </div>
        <div class="info-item">
          <label>手机号</label>
          <span class="modify">修改</span>
          <p>18337539887</p>
        </div>
        <div class="info-item">
          <label>密码</label>
          <span class="modify">修改</span>
          <p>******</p>
        </div>
        <div class="avatar">
          <div class="avatar"> 
            <img :src="$store.state.userInfo.avatarUrl"  alt="用户头像">
          </div>
          <button class="change-avatar">更改头像</button>
        </div>
      </div>
    </div>

    
    <FooterView />
</div>
  </template>
  
  <script>
  import FooterView from "@/components/footerView.vue";
  import TopView from "@/components/topView.vue";
  export default {
    data() {
      return {
        
      }
    },
    components: {
      FooterView,
      TopView, 
    }
  }
  </script>
  
  <style scoped lang="scss">
  .container {
    margin: 20px auto;
    width: 1000px;
    height: 800px;
    display: flex;
    border: 1px solid #dcdbdb;
  }
  .con-right {
    width: 120px;
    background-color: #f8f8f8;
  }
  .con-right ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .con-right li {
    padding: 10px;
    cursor: pointer;
  }
 .myindex {
    background-color: #fff;
    font-weight: bold;
    color:#00cf8c;
    border-right: 3px solid #00cf8c;
  }
  .main {
    flex: 1;
    padding: 20px;
  }
  .info-item {
    margin: 30px 0 20px 0;
   
    flex-direction: column;
    border-bottom: 1px solid rgb(163, 161, 161);
  }
  .info-item label {
    font-weight: bold;
    margin: 5px 5px 5px 0;
    font-size:17px;
  }
  .modify {
    color: #00b38a;
    cursor: pointer;
    margin-bottom: 5px;
    font-size:14px;
  }

  .avatar {
    width: 150px;
    height: 150px;
    border: 1px solid #eee;
    display: flex;
    margin-top: 30px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
      img{
        width: 150px;
        height: 150px;
      }
  }
  .change-avatar {
    padding: 5px 10px;
    color: #00b38a;
    background-color: #fff;
    border: 1px solid #00b38a;
    margin-top: 15px;
    cursor: pointer;
  }
  </style>